<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <input type="text" placeholder="说点什么呢" v-model="weibo.content">
  <el-upload
          action="/upload"
          name="pic"
          limit="3"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  <hr>
  <input type="button" value="发布微博" @click="insert()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
          dialogImageUrl: '',
          dialogVisible: false,
          weibo:{
            content:"",
            url:""
          }
        },
        methods:{
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
          },
          handleSuccess(response,file,fileList){
            //response代表服务器上传成功时响应的数据,此处的response和Axios框架
            //发出的请求得到的response不同,类似于response.data
            //file代表当前上传成功的文件
            //fileList代表上传成功的所有文件(是一个数组)
            v.weibo.url = response;
          },
          insert(){
            if (v.weibo.url==""){
              alert("请选择上传的图片!");
              return;
            }
            axios.post("/insert",v.weibo).then(function (response) {
              alert("发布完成!");
              location.href="/";
            })
          }
        }
    })
</script>
</body>
</html>